<template>
	<view class="u-content">
		<view class="tab">
			<view :class="isActive == true ? 'active1' : '' + 'btn1'" @click="choose(0)">
				事项收藏
			</view>
			<view :class="isActive == true ? 'active2' : '' + 'btn2'" @click="choose(1)">
				政策收藏
			</view>
		</view>
		<view class="swiperBox">
			<swiper class="swiper" :current="current" :disable-touch="true">
				<swiper-item>
					<view class="swiper-item">
						<scroll-view scroll-y @scrolltolower="lower" style="height: 100%;">
							<view class="content" style="padding: 0 30rpx;">
								<view class="matter" v-for="(item,index) in martterList" :key="index">
									<view class="matterCont" @click="toDetail(item,1)">
										<view class="title">
											<text>{{item.itemName}}</text>
										</view>
										<view class="arrows">
											<image src="../../static/back.png"></image>
										</view>
									</view>
									<view class="collect">
										<text>{{ item.insertTime }}</text>
										<text @click="matterCancel(item,index)">取消收藏</text>
									</view>
								</view>
								<view class="noData" v-if="martterList.length == 0 && status=='nomore'">
									<image src="../../static/noData.jpg"></image>
								</view>
								<uni-load-more :status="status" v-if="martterList.length != 0"></uni-load-more>
							</view>
						</scroll-view>
					</view>
				</swiper-item>

				<swiper-item>
					<view class="swiper-item">
						<scroll-view scroll-y style="height: 100%;">
							<view class="content" style="padding: 0 30rpx;">
								<view class="matter" v-for="(item,index) in policyList" :key="index">
									<view class="matterCont" @click="toDetail(item,2)">
										<view class="title">
											<text>{{item.title}}</text>
										</view>
										<view class="arrows">
											<image src="../../static/back.png"></image>
										</view>
									</view>
									<view class="collect">
										<text>{{ item.updateTime }}</text>
										<text @click="policyCancel(item,index)">取消收藏</text>
									</view>
								</view>
								<view class="noData" v-if="policyList.length == 0">
									<image src="../../static/noData.jpg"></image>
								</view>
								<uni-load-more :status="status" v-if="policyList.length != 0"></uni-load-more>
							</view>
						</scroll-view>
					</view>
				</swiper-item>

			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: true,
				navIndex: 0,
				// t: '1633399426075',
				martterList: [],
				current: 0,
				pageNum: 1,
				pageSize: 10,
				status: 'more',
				policyList: []
			}
		},
		onLoad() {
			this.selectMyItemCollection()
			this.myCollectionList();
		},
		onPullDownRefresh(){
			this.pageNum = 1;
			this.martterList = [];
			this.policyList = [];
			this.selectMyItemCollection()
			this.myCollectionList();
		},
		methods: {
			policyCancel(item, index) {
				uni.showModal({
					title: '温馨提示',
					content: '是否取消收藏',
					success: (res) => {
						if (res.confirm) {
							this.insertOrRemoveMyCollection(item.id, index)
						}
					}
				});
			},
			matterCancel(item, index) {
				uni.showModal({
					title: '温馨提示',
					content: '是否取消收藏',
					success: (res) => {
						if (res.confirm) {
							this.cancelItemCollection(item.itemCode, index)
						}
					}
				});
			},
			insertOrRemoveMyCollection(id,index){
				let data = {
					policyId:id,
					qyUuid:1234
				}
				this.$ajax({
					url: '/api/news/zwCollection/insertOrRemoveMyCollection',
					needAuth: true,
					contentType:'application/json;charset=utf-8',
					data: JSON.stringify(data),
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '取消收藏',
							icon: 'none'
						});
						this.policyList.splice(index, 1)
					}
				})
			},
			cancelItemCollection(itemCode, index) {
				this.$ajax({
					url: '/api/wwwNews/cancelItemCollection',
					needAuth: true,
					data: {
						itemCode: itemCode,
						userType: uni.getStorageSync('userType')
					}
				}).then(res => {
					if (res.code == 200) {
						this.martterList.splice(index, 1)
						uni.showToast({
							title: res.data,
							icon: 'none'
						})
					}
				})
			},
			toDetail(item, type) {
				if (type == 1) {
					uni.navigateTo({
						url: "/pages/matter/baseInfo?itemCode=" + item.itemCode
					})
				}
				if (type == 2) {
					uni.navigateTo({
						url: "/pages/bright/unscramble?id=" + item.id
					})
				}
			},
			lower() {
				if (this.status != 'more') {
					return false
				}
				this.pageNum++;
				this.selectMyItemCollection();
			},
			choose(index) {
				if (index != this.navIndex) {
					this.isActive = !this.isActive;
					this.navIndex = index;
					this.current = index;
				}
			},
			selectMyItemCollection() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.status = 'loading'
				this.$ajax({
					url: '/api/wwwNews/selectMyItemCollection',
					needAuth: true,
					method: 'get',
					userType:true,
					data: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						userType:uni.getStorageSync('userType')
					}
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;
						if (data.records.length === 0 && this.martterList.length === 0) {
							this.status = 'nomore';
						} else if (this.pageNum < Math.ceil(data.total / this.pageSize)) {
							this.status = 'more';
						} else {
							this.status = 'nomore';
						}

						this.martterList = this.martterList.concat(data.records);
					}
				}).finally(() => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
			},
			myCollectionList() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.status = 'loading'
				this.$ajax({
					url: '/api/news/zwCollection/myCollectionList',
					needAuth: true,
					data: {
						qyUuid: 1234
					}
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;
						this.policyList = data;
					}
				}).finally(() => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.u-content {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.noData {
			display: flex;
			justify-content: center;

			image {
				width: 374rpx;
				height: 314rpx;
			}
		}

		.tab {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 120rpx;

			.btn1 {
				box-sizing: border-box;
				width: 173rpx;
				height: 62rpx;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				border: solid 2rpx #1785fd;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang-SC-Medium;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 48rpx;
				letter-spacing: 0rpx;
				color: #1785fd;
			}

			.active1 {
				box-sizing: border-box;
				width: 173rpx;
				height: 62rpx;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				// border: solid 2rpx #1785fd;
				background-color: #1785fd;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang-SC-Medium;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 48rpx;
				letter-spacing: 0rpx;
				color: #ffffff;
			}

			.btn2 {
				width: 173rpx;
				height: 62rpx;
				background-color: #1785fd;
				border-radius: 0rpx 8rpx 8rpx 0rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang-SC-Medium;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 48rpx;
				letter-spacing: 0rpx;
				color: #ffffff;
			}

			.active2 {
				width: 173rpx;
				height: 62rpx;
				border-radius: 0rpx 8rpx 8rpx 0rpx;
				box-sizing: border-box;
				border: solid 2rpx #1785fd;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang-SC-Medium;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 48rpx;
				letter-spacing: 0rpx;
				color: #1785fd;
			}
		}

		.swiperBox {
			flex: 1;
			overflow: hidden;

			.swiper {
				height: 100%;

				.swiper-item {
					height: 100%;
				}
			}
		}

		.matter {
			padding: 30rpx 0rpx;
			border-bottom: 1rpx solid #EEEEEE;

			.matterCont {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					width: 482rpx;
					height: 100%;
					margin-top: 8rpx;

					text {
						font-size: 28rpx;
						color: #333333;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
					}
				}

				.arrows {
					image {
						width: 10rpx;
						height: 18rpx;
					}
				}
			}

			.collect {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10rpx;

				text {
					&:nth-child(1) {
						font-size: 26rpx;
						color: #999;
					}

					&:nth-child(2) {
						background-color: #1785fd;
						color: #FFFFFF;
						font-size: 24rpx;
						padding: 6rpx 10rpx;
						border-radius: 4rpx;
					}
				}
			}
		}

	}
</style>
